<template>
  <div>
    <div class="container_main">

      <div class="container_top">
        <div class="top_left part">
          <div class="tab-panel">
            <div v-for="(item, index) in tab2List" :key="index" @click="selTab2Option(item)">
              <span class="option-btn" :class="{ btnSelected: item.isActive }">{{ item.text }}</span>
            </div>
          </div>
          <div class="title">风险详情</div>
          <div class="section">
            <div class="title bg">正向越限<span>单位:MW</span></div>
            <div class="content">
              <div class="record" v-for="(item, index) in forwardList" :key="index">
                <div class="row" style="border-bottom: 1px dashed #d3ba58">
                  <div class="row-name row-3" :style="{
                    color:
                      item.percent >= 100
                        ? '#ed4646'
                        : item.percent >= 90 && item.percent < 100
                          ? '#d3ba58'
                          : '#d3ba58',
                  }">
                    {{ item.dev_name }}
                  </div>
                  <!-- <div class="info row-3">
                    <div class="label">设备名称:</div>
                    <div class="val">{{ item.dev_name }}</div>
                  </div> -->
                  <div class="info row-3">
                    <div class="label">最大越限时刻：</div>
                    <div class="val">{{ item.over_time }}</div>
                  </div>
                  <div class="info row-3">
                    <div class="label">越限时段：</div>
                    <div class="val">{{ item.yx_duration }}</div>
                  </div>
                </div>
                <div class="row">
                  <div class="info row-2">
                    <div class="label">最大值：</div>
                    <div class="val">{{ Number(item.dev_p).toFixed(2) }}</div>
                  </div>
                  <div class="info row-2">
                    <div class="label">限值：</div>
                    <div class="val">{{ Number(item.dev_se).toFixed(2) }}</div>
                  </div>
                  <div class="info row-4">
                    <div class="label">负载率</div>
                    <el-progress class="progress" :stroke-width="8" :percentage="item.dev_rate" :show-text="false"
                      :color="item.dev_rate >= 100
                        ? '#ed4646'
                        : item.dev_rate >= 90 && item.dev_rate < 100
                          ? '#d3ba58'
                          : '#d3ba58'
                        "></el-progress>
                    <div class="val" :style="{
                      color:
                        item.dev_rate >= 100
                          ? '#ed4646'
                          : item.dev_rate >= 90 && item.dev_rate < 100
                            ? '#d3ba58'
                            : '#d3ba58',
                    }">
                      {{ Number(item.dev_rate).toFixed(2) }}%
                    </div>
                  </div>
                  <div class="info row-2">
                    <div class="btn" @click="adJustPolicyEvt(item)">调整策略</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="section">
            <div class="title bg">反向越限<span>单位:MW</span></div>
            <div class="content">
              <div class="record" v-for="(item, index) in reverseList" :key="index">
                <div class="row" style="border-bottom: 1px dashed #d3ba58">
                  <div class="row-name row-3" :style="{
                    color:
                      item.percent >= 100
                        ? '#ed4646'
                        : item.percent >= 90 && item.percent < 100
                          ? '#d3ba58'
                          : '#d3ba58',
                  }">
                    {{ item.dev_name }}
                  </div>
                  <div class="info row-3">
                    <div class="label">最大越限时刻：</div>
                    <div class="val">{{ item.over_time }}</div>
                  </div>
                  <div class="info row-3">
                    <div class="label">越限时段：</div>
                    <div class="val">{{ item.yx_duration }}</div>
                  </div>
                </div>
                <div class="row">
                  <div class="info row-2">
                    <div class="label">最大值：</div>
                    <div class="val">{{ Number(item.dev_p).toFixed(2) }}</div>
                  </div>
                  <div class="info row-2">
                    <div class="label">限值：</div>
                    <div class="val">{{ Number(item.dev_se).toFixed(2) }}</div>
                  </div>
                  <div class="info row-4">
                    <div class="label">负载率</div>
                    <el-progress class="progress" :stroke-width="8" :percentage="item.dev_rate" :show-text="false"
                      :color="item.dev_rate >= 100
                        ? '#ed4646'
                        : item.dev_rate >= 90 && item.dev_rate < 100
                          ? '#d3ba58'
                          : '#d3ba58'
                        "></el-progress>
                    <div class="val" :style="{
                      color:
                        item.dev_rate >= 100
                          ? '#ed4646'
                          : item.dev_rate >= 90 && item.dev_rate < 100
                            ? '#d3ba58'
                            : '#d3ba58',
                    }">
                      {{ Number(item.dev_rate).toFixed(2) }}%
                    </div>
                  </div>
                  <div class="info row-2">
                    <div class="btn" @click="adJustPolicyEvt(item)">调整策略</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="top_center part">
          <div class="title">调整策略<span>单位:MW</span></div>
          <div class="ploy-wrap">
            <div class="ploy-row">
              <div style="width: 300px"></div>
              <div class="ploy-info-label">
                <div style="width: 25%"></div>
                <div class="label-des">地调需求量</div>
                <div class="label-des">计算调节量</div>
                <div class="label-des">越限剩余量</div>
              </div>
            </div>
            <block style="cursor: pointer;" @click="changeAdjustEvt(item)" v-for="(item, index) in ployList"
              :key="index">
              <div class="ploy-row">
                <div :class="['ploy-title', item.status == 0 ? '' : 'tit-yellow']">
                  {{ item.title }}
                </div>
                <img class="ploy-arrow" src="@/assets/images/ploy-arrow.png" />
                <div class="ploy-infos">
                  <div class="ploy-info" v-for="(its, index2) in item.data" :key="index2">
                    <span class="label" style="color: #00706b">{{
                      its.text
                    }}</span>
                    <span style="color: #2e393a">{{ its.val1 }}</span>
                    <span style="color: #af9d24">{{ its.val2 }}</span>
                    <span style="color: #2e393a">{{ its.val3 }}</span>
                  </div>
                </div>
              </div>
              <img v-if="index != ployList.length - 1" class="ploy-flow" src="@/assets/images/ploy-flow.png" />
            </block>
          </div>
        </div>
        <div class="top_right part">
          <div class="title bg">{{ rightText }}主变资源统计<span>单位:MW</span></div>
          <div style="width: 100%;  padding: 10px">
            <el-table max-height="400" :cell-style="{ border: '1px solid #0C8F96', height: '35px' }"
              :row-style="setRowClass" :header-row-style="{ height: '45px' }" :header-cell-style="{
                'border-radius': 0,
                border: '1px solid #0C8F96',
                'background-color': 'rgba(117,215,225,0.2)',
                'text-align': 'center',
                'font-size': '16px',
                color: '#17274A',
                'font-weight': 'bold',
              }" :data="dataList" v-loading="dataListLoading" style="width: 99.5%" ref="table">
                            <el-table-column type="index" prop="" header-align="center" align="center" label="序号"></el-table-column>
              <el-table-column prop="name" header-align="center" align="center" label="资源名称"></el-table-column>
              <el-table-column prop="type" header-align="center" align="center" label="资源类型"></el-table-column>
              <el-table-column prop="cn" header-align="center" align="center" label="调节能力"></el-table-column>

              <!-- <el-table-column prop="cn" header-align="center" align="center" label="上调能力"></el-table-column>
              <el-table-column prop="cn" header-align="center" align="center" label="下调能力"></el-table-column> -->
            </el-table>
          </div>
        </div>
      </div>
      <div class="container_bottom">
        <div class="bottom_left part">
          <div class="title">{{ fuText }}</div>
          <div class="ta-btn-menu">
            <el-button class="btn1" v-for="(item, index) in btnMenu1" :key="index" :class="{ on: item.isActive }"
              @click="switchTab1(item)">
              {{ item.text }}
            </el-button>
          </div>
          <div style="width: 100%;  padding: 10px">

            <el-table max-height="365px" v-show="fuText === '网侧调整'"
              :cell-style="{ border: '1px solid #0C8F96', height: '35px' }" :header-row-style="{ height: '45px' }"
              :header-cell-style="{
                'border-radius': 0,
                border: '1px solid #0C8F96',
                'background-color': 'rgba(117,215,225,0.2)',
                'text-align': 'center',
                'font-size': '16px',
                color: '#17274A',
                'font-weight': 'bold',
              }" :data="mytableData1" style="width: 99.5%" ref="table">
              <el-table-column type="index" header-align="center" align="center" label="序号"></el-table-column>
              <el-table-column prop="closeCheck" header-align="center" align="center" label="合环校核	"></el-table-column>
              <el-table-column prop="close_cbname" header-align="center" align="center" label="控合开关	"></el-table-column>
              <el-table-column prop="open_cbname" header-align="center" align="center" label="控分开关	"></el-table-column>
              <el-table-column prop="ovevalue" header-align="center" align="center" label="越限量	"></el-table-column>
              <el-table-column prop="p_load" header-align="center" align="center" label="计算调节功率	"></el-table-column>
              <el-table-column prop="reserve_float2" header-align="center" align="center" label="实际调节功率	">
              </el-table-column>
              <el-table-column prop="reserve_string3" header-align="center" align="center"
                label="方案描述	"></el-table-column>
            </el-table>

            <el-table max-height="250px" v-show="fuText === '负荷侧调整' || fuText === '储能调整'"
              :cell-style="{ border: '1px solid #0C8F96', height: '35px' }" :header-row-style="{ height: '45px' }"
              :header-cell-style="{
                'border-radius': 0,
                border: '1px solid #0C8F96',
                'background-color': 'rgba(117,215,225,0.2)',
                'text-align': 'center',
                'font-size': '16px',
                color: '#17274A',
                'font-weight': 'bold',
              }" :data="tableData2" style="width: 99.5%" ref="table">
              <el-table-column type="index" header-align="center" align="center" label="序号"></el-table-column>
              <el-table-column prop="actname" header-align="center" align="center" label="设备"></el-table-column>
              <el-table-column prop="bef_val" header-align="center" align="center" label="调整前"></el-table-column>
              <el-table-column prop="now_val" header-align="center" align="center" label="调整后"></el-table-column>
              <el-table-column prop="control_value" header-align="center" align="center" label="调整量"></el-table-column>
              <!-- <el-table-column prop="allow" header-align="center" align="center" label="省调允许调整量"></el-table-column> -->
              <el-table-column prop="adjustTime" header-align="center" align="center" label="调整时间"></el-table-column>
              <el-table-column prop="status" header-align="center" align="center" label="省调校核状态">
                <template slot-scope="scope">
                  <div v-if="scope.row.status == '1'" style="color: #00706b; font-weight: 600">
                    已通过校核
                  </div>
                  <div v-else>未通过校核</div>
                </template>
              </el-table-column>
            </el-table>

            <el-table max-height="400px" v-show="fuText == '电源调整'"
              :cell-style="{ border: '1px solid #0C8F96', height: '35px' }" :header-row-style="{ height: '45px' }"
              :header-cell-style="{
                'border-radius': 0,
                border: '1px solid #0C8F96',
                'background-color': 'rgba(117,215,225,0.2)',
                'text-align': 'center',
                'font-size': '16px',
                color: '#17274A',
                'font-weight': 'bold',
              }" :data="tableData2" style="width: 99.5%" ref="table">
              <el-table-column type="index" header-align="center" align="center" label="序号"></el-table-column>
              <el-table-column prop="actname" header-align="center" align="center" label="调整设备"></el-table-column>
              <el-table-column prop="bef_val" header-align="center" align="center" label="调整前"></el-table-column>
              <el-table-column prop="now_val" header-align="center" align="center" label="调整后"></el-table-column>
              <el-table-column prop="control_value" header-align="center" align="center" label="调整量"></el-table-column>
              <el-table-column prop="adjustTime" header-align="center" align="center" label="调整时间"></el-table-column>
            </el-table>
          </div>
          <div v-if="ddssState == 0 && fuText !== '网侧调整'" class="ta-btn-menu">
            <el-button class="btn3 on" @click="didiaoShangEvt()">
              地调上送
              <img class="img-abs" src="@/assets/images/uncheck.png" />
            </el-button>
          </div>
          <div v-if="ddssState == 1 && fuText !== '网侧调整'" class="ta-btn-menu">
            <el-button class="btn3 on">
              地调上送
              <img class="img-abs" src="@/assets/images/check.png" />
            </el-button>
            <img style="width: 40px; height: 40px" src="@/assets/images/dbarrow.png" />
            <el-button class="btn3">
              省调校核
              <img class="img-abs" src="@/assets/images/uncheck.png" />
            </el-button>
          </div>
          <div v-if="ddssState == 2 && fuText !== '网侧调整'" class="ta-btn-menu">
            <el-button class="btn3 on">
              地调上送
              <img class="img-abs" src="@/assets/images/check.png" />
            </el-button>
            <img style="width: 40px; height: 40px" src="@/assets/images/dbarrow.png" />
            <el-button class="btn3 on">
              省调校核
              <img class="img-abs" src="@/assets/images/check.png" />
            </el-button>
          </div>
        </div>
        <div class="bottom_right part">
          <div class="title">调节结果<span>单位:MW</span></div>
          <div class="chart" id="phtzChart" ref="phtzChart"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {
  riskDetail, netSideAdjust, storageLoadAdjust, adjustment, statistics, adjustResult
} from "@/api/index";

export default {
  name: "business-city",
  components: {},
  data() {
    return {

      ddssState: 0,
      upData_myData: false,
      momentData: [],

      adParams: {
        deviceId: "",
      },
      zytjParams: {
        curveType: 1,
        deviceId: '',

      },

      fxParams: {
        devType: "1312",
      },

      fuText: '网侧调整',

      cnfhcParams: {
        deviceId: "",
        deviceType: '1',
      },
      rightText: '',
      myTimepicker: new Date().toLocaleDateString(),
      tab1List: [
        { text: "地区风险分析", id: 0, isActive: false },
        { text: "省调需求响应", id: 1, isActive: true },
      ],

      tab2List: [
        { text: "主变", id: 0, isActive: true },
        { text: "馈线", id: 1, isActive: false },
      ],
      forwardList: [
        {
          name: "翔宇变2号主变.高",
          point: "12:30",
          time: "11:00-13:00",
          max: "43.6",
          limit: "40",
          percent: 109,
        },
        {
          name: "吉龙变2号主变.高",
          point: "12:30",
          time: "11:00-13:00",
          max: "38",
          limit: "40",
          percent: 95,
        },
        {
          name: "上峰变#2主变.高",
          point: "12:30",
          time: "11:00-13:00",
          max: "41",
          limit: "40",
          percent: 105,
        },
        {
          name: "学景变1号主变.高",
          point: "12:30",
          time: "11:00-13:00",
          max: "40",
          limit: "40",
          percent: 75,
        },
      ],
      reverseList: [
        {
          name: "学苑变2号主变.高",
          point: "12:30",
          time: "11:00-13:00",
          max: "38",
          limit: "40",
          percent: 95,
        },
        {
          name: "金路变1号主变.高",
          point: "12:30",
          time: "11:00-13:00",
          max: "40",
          limit: "40",
          percent: 75,
        },
        {
          name: "秣陵变2号主变.高",
          point: "12:30",
          time: "11:00-13:00",
          max: "43.6",
          limit: "40",
          percent: 109,
        },
        {
          name: "新庄变#2主变.高",
          point: "12:30",
          time: "11:00-13:00",
          max: "41",
          limit: "40",
          percent: 105,
        },
      ],
      dataList: [

      ],
      dataListLoading: false,
      phtzChart: undefined,
      phtzChartOption: {
        color: ["#9a67e8", "#2bb193", "#af9d24"],
        tooltip: {
          trigger: "axis",
        },
        legend: {
          top: "6%",
          type: "plain",
        },
        grid: {
          left: "3%",
          right: "6%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["00:15", "05:00", "09:45", "14:30", "19:15", "24:00"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "计算前",
            type: "line",
            data: [],
            smooth: true,
            symbolSize: 0,
          },
          {
            name: "计算后",
            type: "line",
            data: [],
            smooth: true,
            symbolSize: 0,
          },
          {
            name: "限值",
            type: "line",
            lineStyle: {
              type: "dashed",
            },
            data: [],
            smooth: true,
            symbolSize: 0,
          },
        ],
      },
      ployList: [
        {
          id: 1,
          title: "网侧调整",
          status: 1,
          data: [{ text: "负荷转供", val1: "0", val2: "0", val3: "0" }],
        },
        {
          id: 2,
          title: "储能调整",
          status: 1,
          data: [{ text: "储能调整", val1: "0", val2: "0", val3: "0" }],
        },
        {
          id: 3,
          title: "电源调整",
          status: 1,
          data: [
            { text: "非统调电源调整", val1: "0", val2: "0", val3: "0" },
            { text: "统调电源调整", val1: "0", val2: "0", val3: "0" },
          ],
        },
        {
          id: 4,
          title: "负荷侧调整",
          status: 1,
          data: [
            { text: "可调负荷调整", val1: "0", val2: "0", val3: "0" },
            { text: "虚拟电厂调整", val1: "0", val2: "0", val3: "0" },
            { text: "微电网调整", val1: "0", val2: "0", val3: "0" },
          ],
        },
      ],
      btnMenu1: [

      ],

      mytableData1: [],
      tableData2: [
      ],
    };
  },
  created() {
    // 风险详情
    this.useMyriskDetail()
    //调整策略模块
    // this.useMyadjustment()




  },
  mounted() {

  },
  methods: {

    didiaoShangEvt() {
      this.ddssState = 1
    },

    // 渲染折线图
    initZxtechatrs() {
      this.phtzChart = echarts.init(this.$refs.phtzChart);
      this.phtzChartOption && this.phtzChart.setOption(this.phtzChartOption);
    },


    // 调整结果
    useMyadjustResult() {
      adjustResult(this.adParams).then(res => {
        if (res.code !== 200) return

        res.data.afterCalculate = res.data.afterCalculate.slice(1)
        res.data.beforeCalculate = res.data.beforeCalculate.slice(1)


        let afterData = []
        let beforeData = []
        let limitData = []
        let xData = []

        res.data.afterCalculate.forEach(it => {
          xData.push(it.x)
          afterData.push(Number(it.y).toFixed(2))
          limitData.push(Number(res.data.limitCurve).toFixed(2))
        })

        res.data.beforeCalculate.forEach(it => {
          beforeData.push(Number(it.y).toFixed(2))
        })



        this.phtzChartOption.xAxis.data = xData
        this.phtzChartOption.series[0].data = beforeData
        this.phtzChartOption.series[1].data = afterData
        this.phtzChartOption.series[2].data = limitData

        this.initZxtechatrs()

      })
    },


    //调整策略模块
    useMyadjustment() {
      adjustment(this.adParams).then(res => {
        this.ployList[0].data[0].val1 = Number(res.data.load.requirement).toFixed(2)
        this.ployList[0].data[0].val2 = Number(res.data.load.calculate).toFixed(2)
        this.ployList[0].data[0].val3 = Number(res.data.load.surplus).toFixed(2)

        this.ployList[1].data[0].val1 = Number(res.data.cn.requirement).toFixed(2)
        this.ployList[1].data[0].val2 = Number(res.data.cn.calculate).toFixed(2)
        this.ployList[1].data[0].val3 = Number(res.data.cn.surplus).toFixed(2)

        this.ployList[2].data[0].val1 = Number(res.data.notTracking.requirement).toFixed(2)
        this.ployList[2].data[0].val2 = Number(res.data.notTracking.calculate).toFixed(2)
        this.ployList[2].data[0].val3 = Number(res.data.notTracking.surplus).toFixed(2)


        this.ployList[2].data[1].val1 = Number(res.data.tracking.requirement).toFixed(2)
        this.ployList[2].data[1].val2 = Number(res.data.tracking.calculate).toFixed(2)
        this.ployList[2].data[1].val3 = Number(res.data.tracking.surplus).toFixed(2)

        this.ployList[3].data[0].val1 = Number(res.data.adjustLoad.requirement).toFixed(2)
        this.ployList[3].data[0].val2 = Number(res.data.adjustLoad.calculate).toFixed(2)
        this.ployList[3].data[0].val3 = Number(res.data.adjustLoad.surplus).toFixed(2)

        this.ployList[3].data[1].val1 = Number(res.data.virtualGrid.requirement).toFixed(2)
        this.ployList[3].data[1].val2 = Number(res.data.virtualGrid.calculate).toFixed(2)
        this.ployList[3].data[1].val3 = Number(res.data.virtualGrid.surplus).toFixed(2)

        this.ployList[3].data[2].val1 = Number(res.data.microGrid.requirement).toFixed(2)
        this.ployList[3].data[2].val2 = Number(res.data.microGrid.calculate).toFixed(2)
        this.ployList[3].data[2].val3 = Number(res.data.microGrid.surplus).toFixed(2)

        // alert('执行了')
        this.ployList.forEach(it => {
          console.log(console.log(it, '看itd1zhi1'));
          if (it.title != '网侧调整') {
            // alert('世界')
            if (it.data[0].val1 < 0) {
              it.data[0].val1 = '0.00'
              if (it.data.length == 2) {
                it.data[1].val1 = '0.00'
              }
              if (it.data.length == 3) {
                it.data[1].val1 = '0.00'
                it.data[2].val1 = '0.00'
              }
            }
          }
        })
      })
    },

    // 主变资源统计 
    useMystatistics() {
      statistics(this.zytjParams).then(res => {
        if (res.code !== 200) return

        for (let k in res.data) {
          if (!res.data[k]) {
            res.data[k] = '0'
          }
        }

        // this.dataList = res.data
        let newData = [
          { index: 1, name: "储能", type: "储", cn: res.data.cn, },
          { index: 2, name: "非统调电源", type: "源", cn: res.data.ftt, },
          { index: 3, name: "统调电源", type: "源", cn: res.data.tt, },
          { index: 4, name: "可调负荷", type: "荷", cn: res.data.ktfh, },
          { index: 5, name: "虚拟电厂", type: "荷", cn: res.data.xndc, },
          { index: 6, name: "微电网", type: "荷", cn: res.data.wdw, },
        ]
        this.dataList = newData

      })
    },


    // 网测调整
    // 网侧单独调整
    // usemynetSideAdjust2(){

    // },


    usemynetSideAdjust() {



      if (this.adParams.deviceId === '') {
        this.$message.warning('请先选择调整策略')
        return
      }

      netSideAdjust(this.adParams).then(res => {
        if (res.code !== 200) return

        res.data.forEach(it => {
          it.ovevalue = Number(it.ovevalue).toFixed(2)
          it.p_load = Number(it.p_load).toFixed(2)
        })

        this.mytableData1 = res.data

        if (res.data.length == 0) {
          this.$message.warning('网侧调整暂无数据')
          return
        } else {
          this.mytableData1 = []
          this.mytableData1 = res.data
          if (!this.upData_myData) return

        }

      })
    },

    // 储能调整
    useMystorageLoadAdjust() {

      if (this.cnfhcParams.deviceId === '') {
        this.$message.warning('请先选择调整策略')
        return
      }

      this.cnfhcParams.deviceType == 1
      storageLoadAdjust(this.cnfhcParams).then(res => {
        if (res.code !== 200) return
        if (this.cnfhcParams.deviceType == 1) {
          if (res.data.length == 0) {
            this.$message.warning("储能调整暂无数据")
            return
          } else {
            // this.ployList[0].status = 0

            this.tableData2 = res.data
            alert(this.tableData2)

          }
        }
      })
    },
    // 负荷侧调整
    useMystorageLoadAdjust_fh() {

      let is_return = 0

      if (this.cnfhcParams.deviceId === '') {
        this.$message.warning('请先选择调整策略')
        return
      }

      let newParams = {
        deviceId: this.cnfhcParams.deviceId,
        deviceType: 3,
      }

      storageLoadAdjust(newParams).then(res => {

        if (res.data.length == 0) {
          // this.$message.warning("负荷侧调整暂无数据")
          is_return++
        }

        setTimeout(() => {
          storageLoadAdjust(this.cnfhcParams).then(res => {
            if (res.data.length == 0) {
              this.$message.warning("负荷侧调整暂无数据")
              this.tableData2 = []

              is_return++

              if (is_return == 2) {
                return
              }

            } else {
              // this.ployList[3].status = 0
              res.data.forEach(it => {
                it.bef_val = Number(it.bef_val).toFixed(2)
                it.now_val = Number(it.now_val).toFixed(2)
                it.control_value = Number(it.control_value).toFixed(2)
              })

              this.tableData2 = res.data

            }
          })

        }, 1000)

      })
    },


    // 改变调整策略
    changeAdjustEvt(it) {
      this.ployList.forEach(it => {
        it.status = 1
      })
      console.log(it);
      it.status = 0
      this.fuText = it.title
      this.upData_myData = true


      if (it.title == '网侧调整') {
        this.btnMenu1 = []
        this.usemynetSideAdjust()

      } else if (it.title == '负荷侧调整' || it.title == '储能调整') {

        if (it.title == '储能调整') {
          this.cnfhcParams.deviceType = 1
          this.btnMenu1 = []
          this.useMystorageLoadAdjust()
        } else {
          this.cnfhcParams.deviceType = 2
          this.btnMenu1 = [
            { text: "可调负荷", isActive: false },
            { text: "虚拟电厂", isActive: true },
            { text: "微电网", isActive: false },
          ]
          this.useMystorageLoadAdjust_fh()
        }

      } else if (it.title == '电源调整') {
        this.btnMenu1 = [
          { text: "非统调电源", isActive: true },
          { text: "统调电源", isActive: false },
        ]
        this.tableData2 = []
      }
    },

    // 点击风险详情中调整策略按钮
    adJustPolicyEvt(it) {
      this.upData_myData = false
      this.ployList.forEach(it => {
        it.status = 1
      })
      // this.ployList[0].status = 1
      this.fuText = "网侧调整"
      this.rightText = it.dev_name
      this.btnMenu1 = []
      this.mytableData1 = []
      this.tableData2 = []
      this.adParams.deviceId = it.dev_id
      this.cnfhcParams.deviceId = it.dev_id
      // this.usemynetSideAdjust()
      // 更新主变资源
      this.zytjParams.deviceId = it.dev_id
      this.useMystatistics()
      // 更新调节结果
      // this.adParams.deviceId  = it.dev_id
      this.useMyadjustResult()
      this.usemynetSideAdjust()

      this.useMyadjustment()

    },

    selTab1Option(data) {
      if (!data.isActive) {
        this.tab1List.forEach(function (obj) {
          obj.isActive = false;
        });
        data.isActive = true;
      }
    },


    selTab2Option(data) {

      this.ployList.forEach(it => {
        it.status = 1
      })

      this.fuText = "网侧调整"
      // this.rightText = it.dev_name
      this.btnMenu1 = []
      this.mytableData1 = []
      this.tableData2 = []



      if (!data.isActive) {
        this.tab2List.forEach(function (obj) {
          obj.isActive = false;
        });
        data.isActive = true;
      }

      if (data.text === '主变') {
        this.fxParams.devType = '1312'
        this.useMyriskDetail()

      } else {
        this.fxParams.devType = '0408'
        this.useMyriskDetail()
      }

    },
    setRowClass({ row, rowIndex }) {
      if (row.type == "储") {
        return { color: "#05a4e7" };
      } else if (row.type == "源") {
        return { color: "#af9d24" };
      } else if (row.type == "荷") {
        return { color: "#00706b" };
      } else if (row.type == "新能源") {
        return { color: "#0972e0" };
      }
    },
    switchTab1(item) {
      if (!item.isActive) {
        this.btnMenu1.forEach((obj) => {
          obj.isActive = false;
        });
        item.isActive = true;
      }
      if (item.text === '可调负荷') {
        // this.cnfhcParams.deviceType = 1
        // this.useMystorageLoadAdjust()

      } else if (item.text === '虚拟电厂') {
        this.cnfhcParams.deviceType = 2
        this.useMystorageLoadAdjust_fh()

      } else {
        this.cnfhcParams.deviceType = 3
        this.useMystorageLoadAdjust_fh()

      }

    },
    goShengDiao() {
      this.$emit("business-city-reload", "shengdiao");
    },

    useMyriskDetail() {
      riskDetail(this.fxParams).then(res => {

        if(res.code !== 200  || res.data.length == 0) return 


        res.data.forEach(it => {
          it.dev_rate = it.dev_rate * 100
        })

        // this.fxParams.deviceId = res.data[0].dev_id



        if (res.code !== 200) return
        let Resdata = res.data
        let fxData = []
        let zsData = []


        Resdata.forEach(it => {
          if (it.over_type == 1) {   // 0是正向吗？
            fxData.push(it)
          } else {
            zsData.push(it)
          }
        })

        this.forwardList = zsData
        this.reverseList = fxData


        // 这边默认展示的是正向的第一个
        this.rightText = zsData[0].dev_name
        this.cnfhcParams.deviceId = zsData[0].dev_id
        // 更新主变资源
        this.zytjParams.deviceId = zsData[0].dev_id
        this.useMystatistics()

        // 更新调节结果
        this.adParams.deviceId = zsData[0].dev_id
        this.useMyadjustResult()
        this.usemynetSideAdjust()


        this.useMyadjustment()




      })
    }
  },
};
</script>

<style scoped lang="scss">
* {
  box-sizing: border-box;
}

.el-table--border {
  border-right: 1px solid #0c8f96;
}

.container_main {
  position: relative;
  display: flex;
  flex-direction: column;
  font-size: 16px;

  .mypickTimeDiv {
    position: absolute;
    top: -55px;
    right: 20px;
  }

  .container_top {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .top_left {
    width: 35%;
    height: 480px;
    position: relative;
    background: url("../../../assets/images/box-fxxq.png") center no-repeat;
    background-size: 100% 100%;
    font-size: 16px;

    .section {
      width: 100%;
      height: 223px;
      padding: 10px;

      .title {
        width: 100%;
        height: 35px;
        line-height: 35px;
        font-weight: bold;
        padding-left: 40px;
        padding-right: 20px;

        &.bg {
          background: url(../../../assets/images/views/home/titleBg.png) left center no-repeat;
          background-size: auto 100%;
        }

        span {
          font-size: 12px;
          float: right;
          color: #333;
          font-weight: normal;
        }
      }

      .content {
        width: 100%;
        height: calc(100% - 36px);
        overflow-y: auto;
        padding: 6px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;

        .record {
          width: 100%;
          height: 70px;
          padding: 5px 10px;
          margin: 4px auto;
          background: url(../../../assets/images/frame.png) center no-repeat;
          background-size: 100% 100%;
          display: flex;
          flex-direction: column;
          // justify-content: flex-start;

          .row {
            width: 100%;
            height: 50%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .row-name {
              background: url(../../../assets/images/zhubian.png) left center no-repeat;
              background-size: 20px 20px;
              padding-left: 25px;
              font-weight: 500;
            }

            .info {
              height: 100%;
              display: flex;
              justify-content: flex-start;
              align-items: center;

              .label {
                color: #2e393a;
                font-weight: 500;
                height: 30px;
                line-height: 35px;
              }

              .progress {
                flex: 1;
                margin-left: 5px;
                margin-right: 5px;
                color: red;
              }

              .val {
                color: #00706b;
                font-weight: 600;
                font-size: 18px;
                height: 30px;
                line-height: 35px;
              }

              .btn {
                width: 80px;
                margin-left: 30px;
                height: 26px;
                line-height: 26px;
                text-align: center;
                border: 1px solid #2eadd3;
                font-size: 16px;
                color: #2eadd3;
                cursor: pointer;
              }
            }

            .row-3 {
              width: 33%;
            }

            .row-2 {
              width: 25%;
            }

            .row-4 {
              width: 40%;
            }
          }
        }
      }
    }

    ::-webkit-scrollbar {
      width: 5px;
    }

    ::-webkit-scrollbar-thumb {
      border-radius: 5px;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: #1cc5be;
    }

    ::-webkit-scrollbar-track {
      width: 5px;
      border-radius: 5px;
      background-color: #dddddd;
    }

    .tab-panel {
      position: absolute;
      right: 20px;
      top: 0;
      width: 200px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }

    .option-btn {
      display: block;
      width: 75px;
      height: 30px;
      border: 1px dashed #00706b;
      line-height: 30px;
      text-align: center;
      /* border-radius: 12px; */
      cursor: pointer;
      font-size: 14px;
      background-color: #c5fcff;
      color: #00706b;
    }

    .btnSelected {
      background-color: #00706b;
      color: #ffffff;
    }
  }

  .top_center {
    width: 45%;
    height: 480px;
    background: url("../../../assets/images/box-tzcl.png") center no-repeat;
    background-size: 100% 100%;
  }

  .top_right {
    width: 20%;
    height: 480px;
    padding: 10px 2px;
    background: url("../../../assets/images/phyd_bg.png") center no-repeat;
    background-size: 100% 100%;
  }

  .container_bottom {
    width: 100%;
    display: flex;
    justify-content: center;

    .bottom_left,
    .bottom_right {
      width: 50%;
      height: 450px;
      background: url("../../../assets/images/box-fhtz.png") center no-repeat;
      background-size: 100% 100%;
    }
  }
}

.part {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  .title {
    width: 100%;
    height: 34px;
    line-height: 34px;
    padding-left: 65px;
    padding-right: 20px;
    box-sizing: border-box;
    color: #00706b;
    font-size: 18px;
    font-weight: bold;

    &.bg {
      background: url(../../../assets/images/views/home/titleBg.png) 15px center no-repeat;
      background-size: 100% 100%;
    }

    span {
      font-size: 12px;
      float: right;
      color: #333;
      font-weight: normal;
    }
  }

  .chart {
    width: 100%;
    height: calc(100% - 35px);
  }
}

.ta-head {
  color: #17274a;
  font-size: 14px;
  font-weight: bold;
}

.ta-td-color1 {
  color: #2e393a;
}

.ta-td-color2 {
  color: #af9d24;
}

.ta-btn-menu {
  width: 100%;
  margin: 20px auto;
  display: flex;
  justify-content: center;
  align-items: center;

  .el-button {
    border: none;
    font-size: 16px;
    text-align: center;
    padding: 2px 20px;
    margin-right: 3px;
    font-weight: bold;
  }

  .btn1 {
    height: 38px;
    line-height: 38px;
    padding: 2px 30px;
    background: url(../../../assets/images/business-btn1.png) no-repeat center;
    background-size: 100% 100%;

    &:hover,
    &:focus,
    &.on {
      color: #fff;
      background: url(../../../assets/images/business-btn11.png) no-repeat center;
      background-size: 100% 100%;
    }
  }

  .btn2 {
    height: 33px;
    line-height: 33px;
    background: url(../../../assets/images/business-btn2.png) no-repeat center;
    background-size: 100% 100%;

    &:hover,
    &:focus,
    &.on {
      color: #fff;
      background: url(../../../assets/images/business-btn22.png) no-repeat center;
      background-size: 100% 100%;
    }
  }

  &.mu {
    justify-content: flex-end;
    padding-right: 30px;
  }

  .btn3 {
    position: relative;
    height: 38px;
    line-height: 38px;
    border: 1px solid #00706b;
    margin: auto 10px;
    background: #8cd4e6;
    background-size: 100% 100%;

    &:hover,
    &:focus,
    &.on {
      color: #fff;
      background: #2e6e6a;
    }

    .img-abs {
      position: absolute;
      right: -10px;
      top: -10px;
      width: 20px;
      height: 20px;
    }
  }
}

/*调整策略部分*/
.ploy-wrap {
  width: 100%;
  height: 100%;
  padding: 10px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.ploy-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}

.ploy-title {
  width: 248px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  color: #414346;
  font-weight: 500;
  font-size: 18px;
  background: url(../../../assets/images/ploy-green.png) no-repeat center;
  background-size: 100% 100%;

  &.tit-purple {
    background: url(../../../assets/images/ploy-purple.png) no-repeat center;
    background-size: 100% 100%;
  }

  &.tit-yellow {
    background: url(../../../assets/images/ploy-grey.png) no-repeat center; //这个其实使用的是灰色的背景
    background-size: 100% 100%;
  }
}

.ploy-arrow {
  width: 52px;
  height: 46px;
  margin-right: 10px;
}

.ploy-flow {
  width: 14px;
  height: 24px;
  margin-left: 100px;
  margin-top: 3px;
}

.ploy-infos {
  border: 1px solid #1ab394;
  box-shadow: 4px 3px 8px #89c0c6;
  border-radius: 10px;
  width: 740px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.ploy-info {
  width: 100%;
  height: 32px;
  line-height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;

  span {
    display: block;
    width: 25%;
    height: 100%;
    font-size: 15px;
    font-weight: 500;
    text-align: center;

    &.label {
      text-align: left;
      padding-left: 10px;
    }
  }
}

.ploy-info-label {
  width: 740px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: flex-end;

  .label-des {
    width: 25%;
    height: 30px;
    line-height: 30px;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    background: url(../../../assets/images/ploy-label.png) center no-repeat;
    background-size: 100% 100%;
  }
}

::v-deep .el-progress-bar__outer {
  background: #c1e0dd !important;
}

::v-deep .el-progress.is-success .el-progress-bar__inner {
  background: linear-gradient(to right, #e5f1f2, #408d95) !important;
}

::v-deep .el-icon-circle-check:before {
  content: "";
  display: none;
}

.tab-1 {
  position: absolute;
  right: 250px;
  top: -70px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 15px;
}

.tab1-btn {
  display: block;
  width: 180px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  /* border-radius: 12px; */
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  color: #00706b;
  background: url(../../../assets/images/tab-unsel.png) center no-repeat;
  background-size: 100% 100%;
}

.tab1Selected {
  background: url(../../../assets/images/tab-sel.png) center no-repeat;
  background-size: 100% 100%;
  color: #2d3b4d;
}
</style>
